<template>
    <uni-popup ref="popup" type="bottom" :safe-area="false">
        <view class="subject-selector">
            <!-- 标题栏 -->
            <view class="header">
                <image v-if="backIcon" @click="handleBack" src="/static/fanhuijianyou.png" mode="widthFix"
                    style="width: 54rpx;height: 54rpx;"></image>
                <text style="width: 54rpx;height: 54rpx;" v-else></text>
                <text class="title">请选择学科类别</text>
                <image src="/static/xxclose.png" @click="handleClose" mode="widthFix"
                    style="width: 54rpx;height: 54rpx;"></image>
            </view>

            <!-- 学科选项网格 -->
            <!-- <view class="subjects-grid" v-if="type === 'chuji'">
                <view class="subjects-grid-item" style="margin-bottom: 24rpx;">
                    <view v-for="subject in subjects" :key="subject.value" class="subject-item"
                        :class="{ 'selected': selectedSubject === subject.value }"
                        @click="selectSubject(subject.value)">
                        <text class="subject-text">{{ subject.label }}</text>
                    </view>
                </view>

                <view class="subjects-grid-item" style="grid-template-columns: repeat(2, 1fr);">
                    <view class="subject-item" :class="{ 'selected': selectedSubject === 'general' }"
                        @click="selectSubject('general')">
                        <text class="subject-text">常识</text>
                    </view>
                    <view class="subject-item" :class="{ 'selected': selectedSubject === 'mixed' }"
                        @click="selectSubject('mixed')">
                        <text class="subject-text">混合</text>
                    </view>
                </view>

            </view> -->
            <!-- v-if="type === 'zhongji' || type === 'paiwei-zhongji' || type === 'gaoji' || type === 'paiwei-gaoji'" -->
            <view class="subjects-grid">
                <view class="subjects-grid-item">
                    <view v-for="subject in indexList.sublist" :key="subject.id" class="subject-item"
                        :class="{ 'selected': selectedSubject === subject.id }" @click="selectSubject(subject.id)">
                        <text class="subject-text">{{ subject.name }}</text>
                    </view>
                </view>
            </view>

            <!-- <view class="subjects-grid" v-if="type === 'zhuanjia' || type === 'paiwei-zhuanjia' || type === 'dashi' || type === 'paiwei-dashi'">
                <view class="subjects-grid-item" style="margin-bottom: 24rpx;">
                    <view v-for="subject in subjects3" :key="subject.value" class="subject-item"
                        :class="{ 'selected': selectedSubject === subject.value }"
                        @click="selectSubject(subject.value)">
                        <text class="subject-text">{{ subject.label }}</text>
                    </view>
                </view>

                <view class="subjects-grid-item" style="grid-template-columns: repeat(2, 1fr);margin-bottom: 24rpx;">
                    <view class="subject-item" :class="{ 'selected': selectedSubject === 'art' }"
                        @click="selectSubject('art')">
                        <text class="subject-text">艺术</text>
                    </view>
                    <view class="subject-item" :class="{ 'selected': selectedSubject === 'foreign' }"
                        @click="selectSubject('foreign')">
                        <text class="subject-text">交叉学科</text>
                    </view>
                </view>

                <view class="subjects-grid-item" style="grid-template-columns: repeat(1, 1fr);">
                    <view class="subject-item" :class="{ 'selected': selectedSubject === 'mixed' }"
                        @click="selectSubject('mixed')">
                        <text class="subject-text">混合</text>
                    </view>
                </view>

            </view> -->
            <!-- 确认按钮 -->
            <view class="confirm-btn" @click="handleConfirm">
                <text class="confirm-text">确定</text>
            </view>
        </view>
    </uni-popup>
</template>

<script setup>
import { ref, defineEmits, onMounted } from 'vue'
import { BASE_URL } from '@/utils/request'
import api from '@/api'
import { useUserStore } from '@/store/index.js'
const emit = defineEmits(['confirm', 'close', 'level-selector'])
const userStore = useUserStore()
const popup = ref(null)
const selectedSubject = ref('')
const type = ref('chuji')
const indexList = ref([])
const scene_id = ref('')
const props = defineProps({
    backIcon: {
        type: Boolean,
        default: false
    }
})
// 选择学科
const selectSubject = (value) => {
    selectedSubject.value = value
}

// 确认选择
const handleConfirm = () => {
    // 判断是否登录
    if (!userStore.hasLogin) {
        uni.showToast({
            title: '请先登录',
            icon: 'none'
        })
        return
    }
    if (selectedSubject.value) {
        emit('confirm', {
            id: selectedSubject.value,
            name: indexList.value.sublist.find(item => item.id === selectedSubject.value).name,
            code: type.value,
            image: BASE_URL + indexList.value.sublist.find(item => item.id === selectedSubject.value).image,
            scene_id: scene_id.value,
        })
        closePopup()
    }
}

// 关闭弹窗
const handleClose = () => {
    emit('close')
    closePopup()
}

// 关闭弹窗方法
const closePopup = () => {
    popup.value?.close()
}

// 打开弹窗方法
const openPopup = (options) => {
    console.log(options, 'options')
    type.value = options.type
    scene_id.value = options.scene_id
    if (options.type.includes('-')) {
        type.value = options.type.split('-')[1]
        // 处理普通，排位，自组，活动场场景 固定id为1
        scene_id.value = 1
    }
    indexList.value = options.indexList || []
    api.getQuestionInfo({
        code: type.value,
    }).then(res => {
        indexList.value.sublist = res.data.sublist
        popup.value?.open()
    })
}


// 返回方法
const handleBack = () => {
    closePopup()
    emit('level-selector')
}

// 暴露方法给父组件
defineExpose({
    openPopup,
    closePopup
})
</script>

<style lang="scss" scoped>
.subject-selector {
    width: 100%;
    background: #FFFFFF;
    border-radius: 24rpx;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding-top: 32rpx;
    padding-bottom: 32rpx;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    position: relative;
    padding: 0 32rpx;
}

.title {
    font-size: 32rpx;
    font-weight: 600;
    color: #000000;
}

.close-btn {
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    right: 32rpx;
    top: 50%;
    transform: translateY(-50%);
}

.close-icon {
    font-size: 38rpx;
    color: #fff;
    font-weight: 500;
    margin-bottom: 4rpx;
}

.subjects-grid {
    margin-bottom: 32rpx;
    border-bottom: 1rpx solid #E5E5E5;
    padding: 32rpx;
    padding-top: 0;
    height: 500rpx;
    overflow-y: auto;
}

.subjects-grid-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16rpx 20rpx;
}

.subject-item {
    height: 68rpx;
    border-radius: 180rpx;
    background: rgba(15, 80, 220, 0.08);
    border: 2rpx solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;

    &:active {
        transform: scale(0.95);
    }

    &.selected {
        border-color: #0F50DC;
    }
}

.subject-text {
    font-size: 28rpx;
    color: #0F50DC;
    font-weight: 500;
}

.selected .subject-text {
    font-weight: 600;
}

.confirm-btn {
    width: 240rpx;
    height: 72rpx;
    background: #0F50DC;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 auto;

    &:active {
        transform: scale(0.98);
        background: #1976D2;
    }
}

.confirm-text {
    font-size: 28rpx;
    color: #FFFFFF;
    font-weight: 600;
}
</style>
